<template>
  <div class="body-container">
    <!-- 顶部 -->
    <div class="header-container">
      <div class="header-content" :style="{backgroundImage: 'url(' + headerBk + ')' }">
        <img class="logo" src="../assets/logo.png" alt>
        <p>现场审计作业云平台系统</p>
        <div class="tab-nav">
          <ul class="clearfix">
            <li
              class="fl"
              v-for="(item ,index) in tabNav"
              @click="tabSelect(index,item)"
              :key="index"
              :style="{ background:tabIndex==index? '#2f4668':''}"
            >
              <span>{{item.content}}</span>
            </li>
          </ul>
        </div>
        <div class="header-right">
          <div class="right-content clearfix">
            <div class="user-img fl">
              <img src="../assets/logo.png" alt="defalut">
            </div>
            <div class="fl user-name">
              <span>彭于晏</span>
            </div>
            <div class="fl user-select">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link clearfix">
                  <span class="text-ellipsis fl">{{projectName}}</span>
                  <i class="el-icon-arrow-down el-icon--right fl" style="margin-top: 10px;"></i>
                </span>
                <el-dropdown-menu class="dropdown" style="min-width: 200px;" slot="dropdown">
                  <el-dropdown-item
                    v-for="(item,index) in projectData"
                    :key="index"
                    :command="index"
                    :icon="item.icon"
                    @click.native="selectedProject(index ,item)"
                  >{{item.content}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="fl user-login-out" @click="goLogin">
              <i class="el-icon-switch-button"></i>
              <span>退出</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerBk from "../assets/logoBK.png";

export default {
  name: "Container",
  components: {},
  data() {
    return {
      headerBk: headerBk,
      tabIndex: 0,
      tabName: "",
      tabNav: [],
      tabNavTwo: [],
      projectData: [
        {
          id: 0,
          content: "全审重点项目一期工程",
          icon: "el-icon-plus",
          tabName: [
            { content: "首页", to: "homePage", page: 0 },
            { content: "项目管理", to: "projectManagementPage", page: 1 },
            { content: "数据采集", to: "dataCollectionPage", page: 2 },
            { content: "审计分析", to: "auditAnalysisPage", page: 3 },
            { content: "审计作业", to: "auditOperationPage", page: 4 },
            { content: "辅助工具", to: "assistantToolPage", page: 5 },
            { content: "系统管理", to: "systemManagementPage", page: 6 },
            { content: "帮助", to: "helpPage", page: 7 }
          ]
        },
        {
          id: 1,
          content: "全审重点项目二期工程",
          icon: "el-icon-circle-plus",
          tabName: [
            { content: "首页", to: "homePage", page: 0 },
            { content: "项目管理", to: "projectManagementPage", page: 1 },
            { content: "数据采集", to: "dataCollectionPage", page: 2 }
          ]
        },
        {
          id: 2,
          content: "全审重点项目三期工程",
          icon: "el-icon-circle-plus-outline",
          tabName: [
            { content: "首页", to: "homePage", page: 0 },
            { content: "项目管理", to: "projectManagementPage", page: 1 },
            { content: "数据采集", to: "dataCollectionPage", page: 2 }
          ]
        },
        {
          id: 3,
          content: "全审重点项目四期工程",
          icon: "el-icon-circle-check",
          tabName: [
            { content: "首页", to: "homePage", page: 0 },
            { content: "项目管理", to: "projectManagementPage", page: 1 },
            { content: "数据采集", to: "dataCollectionPage", page: 2 }
          ]
        }
      ],
      projectName: ""
    };
  },
  mounted() {},
  watch: {
    $route() {
      if (this.$route.name == "find404") {
        this.$router.push({ path: `/homePage`, name: `homePage` });
      }
    }
  },
  created() {
    this.tabNav = this.projectData[0].tabName;
    this.projectName = this.projectData[0].content;
    this.selectedTab();
  },
  methods: {
    tabSelect(index, item) {
      let _this = this;
      if (this.$route.name == item.to) {
        return false;
      } else {
        _this.tabIndex = index;
        _this.$router.push({ path: `/${item.to}`, name: item.to });
      }
    },
    //判断进来为哪个tab
    selectedTab() {
      let _this = this;
      let name = this.$route.name;
      let path = this.$route.path;
      if (path.match(RegExp(/homePage/))) {
        _this.tabIndex = 0;
      } else if (path.match(RegExp(/projectManagementPage/))) {
        _this.tabIndex = 1;
      } else if (path.match(RegExp(/dataCollectionPage/))) {
        _this.tabIndex = 2;
      } else if (path.match(RegExp(/auditAnalysisPage/))) {
        _this.tabIndex = 3;
      } else if (path.match(RegExp(/auditOperationPage/))) {
        _this.tabIndex = 4;
      } else if (path.match(RegExp(/assistantToolPage/))) {
        _this.tabIndex = 5;
      } else if (path.match(RegExp(/systemManagementPage/))) {
        _this.tabIndex = 6;
      } else if (path.match(RegExp(/helpPage/))) {
        _this.tabIndex = 7;
      }
    },
    selectedProject(index, item) {
      console.log(index);
      console.log(item);
      this.tabNav = item.tabName;
      this.projectName = item.content;
      // this.$router.push({path: `homePage`, name: 'homePage'});
    },
    goLogin() {
      this.$router.push({ path: `login`, name: "login" });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.active {
  background: #2f4668;
}

.header-right {
  height: 43px;
  width: 426px;
  position: absolute;
  background: url("../assets/witebg@2x.png") no-repeat;
  background-size: cover;
  right: 0;
  bottom: 0;
  padding-top: 22px;

  .right-content {
    width: 100%;
    height: 32px;
    padding-left: 80px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    .user-img {
      height: 26px;
      width: 26px;

      img {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        margin-top: 2px;
      }
    }

    .user-name {
      height: 100%;
      line-height: 32px;
      font-size: 12px;
      color: #333333;
      letter-spacing: 0;
      text-align: right;
      padding: 0 10px 0 10px;
    }

    .user-select {
      position: relative;
      height: 100%;
      width: 160px;
      line-height: 32px;
      font-size: 12px;
      color: #333333;
      letter-spacing: 0;
      cursor: pointer;
      text-align: center;
      &/deep/.el-dropdown {
        width: 100%;
        &/deep/ .el-dropdown-link {
          font-size: 12px;
          color: #333333;
          width: 100%;
          height: 100%;
          span {
            width: 80%;
          }
        }
      }
    }

    .user-login-out {
      height: 100%;
      width: 73px;
      font-size: 13px;
      line-height: 32px;
      margin-left: 10px;
      color: #ffffff;
      letter-spacing: 0;
      position: relative;
      background: #6c8ab6;
      border-radius: 16px;
      text-align: center;
      cursor: pointer;

      img {
        position: absolute;
        top: calc(50% - 7px);
        left: 11px;
        width: 14px;
        height: 14px;
      }

      span {
        padding-left: 6px;
      }
    }
  }
}

.body-container {
  width: 100%;
  height: 80px;
}

.body-content {
  width: 100%;
  height: calc(100% - 120px);
  // height: auto

  .body-content-ul {
    width: 100%;
    height: 100%;

    li {
      width: 100%;
      height: 100%;
    }
  }
}

.header-container {
  height: 80px;
  width: 100%;

  .header-content {
    height: 80px;
    position: relative;
    background-size: 100% 100%;

    .logo {
      width: 58.5px;
      height: 58.5px;
      position: absolute;
      left: 22.7px;
      top: calc(50% - 29.25px);
    }

    p {
      position: absolute;
      left: 104px;
      top: 8px;
      font-size: 24px;
      color: #ffffff;
      letter-spacing: 0;
      text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    }

    .tab-nav {
      height: 32px;
      position: absolute;
      /*width: 100%;*/
      bottom: 0;
      left: 0;
      padding-left: 90px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;

      ul {
        height: 100%;

        li {
          width: 90px;
          height: 32px;
          margin-right: 18px;
          cursor: pointer;
          border-radius: 5px 5px 0 0;
          color: #ffffff;
          display: block;
          line-height: 32px;
          font-size: 14px;
          letter-spacing: 0;
          text-align: center;
        }
      }
    }
  }
}
</style>
